<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<canvas id="diagonal" width="300" height="250" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
function createCanopyPath(context){
	context.beginPath();

	context.moveTo(-25,-50);
	context.lineTo(-10,-80);
	context.lineTo(-20,-80);
	context.lineTo(-5,-110);
	context.lineTo(-15,-110);
	context.lineTo(0,-140);
	context.lineTo(15,-110);
	context.lineTo(5,-110);
	context.lineTo(20,-80);
	context.lineTo(10,-80);
	context.lineTo(25,-50);
	context.closePath();
}

function drawDiagonal(){
var canvas=document.getElementById("diagonal");
var context=canvas.getContext("2d");

//画树冠
context.save();
context.translate(130,250);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin = 'round';
context.strokeStyle='#00DB00';
context.stroke();
context.restore();


//画矩形
context.fillStyle="#FF0000";
context.beginPath();
context.arc(210,52,15,0,Math.PI*2,true);
context.closePath();
context.fill();

//画圆
context.translate(130,250);
context.clearRect(0,0,10,20);
context.fillStyle="00DB00";
context.fillRect(-5,-50,10,50);

//画曲线
//context.translate(-10,350);
}


window.addEventListener("load",drawDiagonal,true);
</script>
</body>
</html>